<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="./Qgis2threejs.css">
<script src="./threejs/three.min.js"></script>
<script src="./threejs/OrbitControls.js"></script>
<script src="./threejs/loaders/GLTFLoader.js"></script>
<script src="./dat-gui/dat.gui.min.js"></script>
<script src="./Qgis2threejs.js"></script>
<script src="./dat-gui_panel.js"></script>
</head>
<body>
<div id="view">
  <div id="labels"></div>
  <div id="northarrow"></div>
</div>

<!-- popup -->
<div id="popup">
  <div id="closebtn">&times;</div>
  <div id="popupbar"></div>
  <div id="popupbody">
    <div id="popupcontent"></div>

    <!-- query result -->
    <div id="queryresult">
      <table id="qr_layername_table">
        <caption>图层</caption>
        <tr><td id="qr_layername"></td></tr>
      </table>

      <table id="qr_coords_table">
        <caption>当前坐标</caption>
        <tr><td id="qr_coords"></td></tr>
      </table>

      <!-- camera actions -->
      <div class="action-btn action-zoom" onclick="app.cameraAction.zoomIn(); app.closePopup();">缩放到这儿</div>
      <div class="action-btn action-move" onclick="app.cameraAction.move(); app.closePopup();">移动到这儿</div>
      <div class="action-btn action-orbit" onclick="app.cameraAction.orbit(); app.closePopup();">绕当前位置旋转</div>

      <!-- attributes -->
      <table id="qr_attrs_table">
        <caption>属性</caption>
      </table>
    </div>

    <!-- page info -->
    <div id="pageinfo">
      <h1>当前视图URL</h1>
      <div><input id="urlbox" type="text"></div>

      <h1>用法</h1>
      <table id="usage">
        <tr><td colspan="2" class="star">鼠标</td></tr>
        <tr><td>左键 + 移动</td><td>旋转</td></tr>
        <tr><td>滚轮</td><td>缩放</td></tr>
        <tr><td>左键 + 移动</td><td>平移</td></tr>

        <tr><td colspan="2" class="star">键盘</td></tr>
        <tr><td>方向键</td><td>水平移动</td></tr>
        <tr><td>Shift + 方向键</td><td>转动</td></tr>
        <tr><td>Ctrl + 方向键</td><td>旋转</td></tr>
        <tr><td>Shift + Ctrl + Up / Down</td><td>放大/缩小</td></tr>
        <tr><td>L</td><td>切换标签显示</td></tr>
        <tr><td>R</td><td>开始 / 停止 旋转动画</td></tr>
        <tr><td>W</td><td>线框模式</td></tr>
        <tr><td>Shift + R</td><td>重置相机位置</td></tr>
        <tr><td>Shift + S</td><td>保存图片</td></tr>
      </table>
    </div>
  </div>
</div>

<!-- progress bar -->
<div id="progress"><div id="bar"></div></div>

<!-- footer -->
<div id="footer"></div>

<script>
var app = Q3D.application,
    container = document.getElementById("view");

app.init(container);      // initialize application

// when all objects have been loaded
app.addEventListener("sceneLoaded", function () {
  // set custom plane z range
  var box = new THREE.Box3().setFromObject(app.scene),
      zMin = app.scene.toMapCoordinates(0, 0, box.min.y).z,
      zMax = app.scene.toMapCoordinates(0, 0, box.max.y).z;
  Q3D.gui.initCustomPlaneFolder(zMin, zMax);
});

// load the scene
app.loadJSONFile("./data/index/scene.json", function () {
  app.start();

  Q3D.gui.init();   // initialize dat-gui panel

  // North arrow inset
  if (Q3D.Config.northArrow.visible) app.buildNorthArrow(document.getElementById("northarrow"), app.scene.userData.rotation);
});
</script>
<style>
  .dg.a{
    margin-right: 45px;
  }
  </style>
</body>
</html>
